<template>

  <div id="signrecord" style="background-color: var(--themeBaseColor); padding: 0; margin: 0;" >
    <c-title :hide="false" v-bind:text="sign_name + '记录'"></c-title>
      <div class="top">
          <div style="margin-left: 2.5rem;">
            <span>{{continueDays()}}</span>/天
            <div>连续{{sign_name}}</div>
            </div>
          <div style="width: 0.1rem; height: 3.5rem; background-color: #e7e7e7; transform: scaleX(0.5); position: relative; top: 0.8rem;"></div>
            <div style="margin-right: 2rem;" >
            <span>{{signTotal}}</span>/天
            <div>累计{{sign_name}}</div>
          </div>
      </div>
    <div class="bottom_reword">
        <div class="reword_content">
          <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
          <div style="text-align: left; font-size: 1rem; color: #333;">累计获得奖励</div>
        <router-link :to="fun.getUrl('signrules')"><div class="directions">{{sign_name}}说明></div></router-link>
        </div>
        <van-row type="flex" >
           <van-col span="12">
            <div style="color: #f84949; font-size: 1rem; margin-top: 0.75rem;">{{cumulative_point}}</div>
            <div style="text-align: center; font-size: 0.875rem;"><img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/signPage/money-icon.png" alt="" style="width: 1.5rem; height: 1.5rem; vertical-align: middle; margin-bottom: 0.1rem;"><span>{{point}}</span></div>
           </van-col>
           <van-col span="12" @click="toUrl('coupon')">
             <div style="color: #f84949; font-size: 1rem; margin-top: 0.75rem;">{{cumulative_coupon}}/张</div>
            <div style="text-align: center; font-size: 0.875rem;"><img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/signPage/coupon-icon.png" alt="" style="width: 1.5rem; height: 1.5rem; vertical-align: middle; margin-bottom: 0.1rem;"><span>优惠券</span></div>
            </van-col>
            <van-col span="12" v-if="is_love">
              <div style="color: #f84949; font-size: 1rem; margin-top: 0.75rem;">{{cumulative_love}}</div>
              <div style="text-align: center; font-size: 0.875rem;"><img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/signPage/love-icon.png" alt="" style="width: 1.5rem; height: 1.5rem; vertical-align: middle; margin-bottom: 0.1rem;"><span>{{love_name}}</span></div>
            </van-col>
            <van-col span="12" v-if="infoData.love_return_total_status">
              <div style="color: #f84949; font-size: 1rem; margin-top: 0.75rem;">￥{{love_return ? love_return : '0.00'}}</div>
              <div style="text-align: center; font-size: 0.875rem;"><img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/signPage/value-icon.png" alt="" style="width: 1.5rem; height: 1.5rem; vertical-align: middle; margin-bottom: 0.1rem;"><span>{{love_name}}返现</span></div>
            </van-col>
            <van-col span="12" v-if="infoData.lucky_draw_open && infoData.cumulative_number_lucky_draws">
             <div style="color: #f84949; font-size: 1rem; margin-top: 0.75rem;">{{infoData.cumulative_number_lucky_draws}}/次</div>
            <div style="text-align: center; font-size: 0.875rem;"><i class="iconfont icon-fontclass-choujiang f-20"></i><span>{{infoData.lucky_draw_name}}</span></div>
            </van-col>
         </van-row>
        </div>
    </div>
     <!-- <van-swipe class="swiperContainer" @change="onChangeFloat" vertical :autoplay="1000"> -->
     <div class="check-record">
        <div class="content">
      <div style="text-align: left; font-size: 1rem; color: #333;">{{sign_name}}记录</div>
         <div v-for="(item,index) in sign_log" :key="index" class="record-item">
            <div style="display: flex; justify-content: space-between;">
              <span style="color: #999;">{{item.created_at}}</span>
               <span v-if="item.status" style="color: #f84949; font-size: 0.875rem;">{{sign_name}}成功</span>
                <span v-else style="color: #f84949; font-size: 0.875rem;">{{sign_name}}失败</span>
            </div>

            <van-row type="flex" >
              <van-col span="12">
                <div style="margin-top: 0.5rem;">{{point}}：{{item.award_point}}</div>
              </van-col>
              <van-col span="12">
                <div style="margin-top: 0.5rem;">优惠券：{{item.award_coupon}}/张</div>
              </van-col>
              <van-col span="12" v-if="is_love">
                <div style="margin-top: 0.5rem;">{{love_name}}：{{item.award_love}}</div>
              </van-col>
              <van-col span="12" v-if="infoData.love_return_total_status">
                <div style="margin-top: 0.5rem;">{{love_name}}返现：￥{{item.total_love_return}}</div>
              </van-col>
              <van-col span="12" v-if="infoData.lucky_draw_open && item.award_number_lucky_draws">
                <div style="margin-top: 0.5rem;">{{infoData.lucky_draw_name}}：{{item.award_number_lucky_draws}}/次</div>
              </van-col>
            </van-row>
         </div>
        </div>
     </div>
     <!-- </van-swipe> -->
  </div>
</template>
<script>
import member_signrecordcontroller from "./member_signrecordcontroller";
export default member_signrecordcontroller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#signrecord {
  min-height: 100vh;

  .top {
    margin-top: 2rem;
    margin-right: 1rem;
    width: 100%;
    height: 5rem;
    display: flex;
    justify-content: space-around;
    font-size: 1rem;
    color: #fff;

    span {
      font-size: 2.14rem;
      font-weight: bold;
      color: #fff;
    }
  }

  .bottom_reword {
    padding: 0 0.71rem 0 0.71rem;
    margin-bottom: 0.71rem;

    .reword_content {
      width: 100%;
      background-color: #fff;
      border-radius: 0.875rem;
      padding: 1rem;
    }

    .directions {
      // position: absolute;
      // right: 0;
      position: relative;
      left: 1rem;
      width: 5rem;
      height: 1.5rem;
      background-color: #000;
      opacity: 0.2;
      border-radius: 1.875rem 0 0 1.875rem;
      color: #fff;
      text-align: center;
      line-height: 1.5rem;
      float: right;
      font-size: 12px;
    }
  }

  .check-record {
    padding: 0 0.71rem 1rem 0.71rem;
    // height: 21.3rem;
    margin-bottom: 10rem;

    .content {
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 0.875rem;
      padding: 1rem;

      .record-item {
        margin-top: 1rem;
      }
    }
  }
}
</style>
